<template>
	<view>
		<view class="video">
			<!-- info.qx === 1 -->
			<view class="zt"
				v-if="info.qx === 1 || (getVideo != '' ? getVideo.type === 1 ? true : getVideo.fx.type === 1 ? true : false : false)">
				<!-- 	<image :src="ossUrl + `/static/27.png`" mode="" class="zt-img" mode="aspectFit"></image>
				<image :src="ossUrl + `/static/31.png`" mode="" class="zt-start"></image> -->
				<video id="myVideo" :src="getVideo != '' ? getVideo.url : ''" controls @timeupdate="onTimeUpdate"
					ref="videoPlayer"  @play.once="handlePlay" ></video>
			</view>
			<view class="noPermission" v-else>
				<image :src="info.js.img" mode="" class="zt-img" mode="aspectFill"></image>
				<view>
					<view class="noPermission-tx">因版权方要求，此视频需要付费购买才能观看哦</view>
					<view class="noPermission-btn" @click="pay">购买视频</view>
				</view>
			</view>
		</view>
		<view style="background: white;">
			<view class="tab">
				<view :class="current === 0 ? 'tab-item ac' : 'tab-item'" @click="setCurrent(0)">
					<text>介绍</text>
				</view>
				<view :class="current === 1 ? 'tab-item ac' : 'tab-item'" @click="setCurrent(1)">
					<text>目录</text>
				</view>
				<view :class="current === 2 ? 'tab-item ac' : 'tab-item'" @click="setCurrent(2)">
					<text>评价</text>
				</view>
				<view :class="current === 3 ? 'tab-item ac' : 'tab-item'" @click="setCurrent(3)">
					<text>推荐</text>
				</view>
			</view>
		</view>


		<Introduce v-if="current === 0 && id > 0" :info="info" :courseId="id" ref="IntroduceRef" />
		<Catalogue v-if="current === 1" :list="info.ml" v-model="videoCurrent" :info="info" />
		<Evaluate v-if="current === 2 && id > 0" :info="info" :courseId="id" ref="EvaluateRef" />
		<Recommend v-if="current === 3 && id > 0" :info="info" :courseId="id" ref="RecommendRef" />
		<view style="width: 100%;height: 150rpx;"></view>
		<!-- footer -->
		<footer>
			<view class="footer-l">
				<view class="footer-l-item" @click="collection">
					<image :src="info.course_collect === 1 ?ossUrl + '/static/evaluate/4.png' : ossUrl + '/static/evaluate/1.png'"
						mode=""></image>
					收藏
				</view>
				<view class="footer-l-item">
					<button open-type="share"></button>
					<image :src="ossUrl + '/static/分享.png'" mode=""></image>
					分享
				</view>
			</view>
			<view class="footer-r" @click="pay" v-if="info.qx != 1">
				<view class="footer-r-title">立即购买</view>
				<view class="footer-r-price">￥{{info.js.price}}/共{{info.ml.length}}集</view>
			</view>
			<view class="footer-r footer-r-cancle" v-else>
				<view class="footer-r-title">已购买</view>
				<view class="footer-r-price">￥{{info.js.price}}/共{{info.ml.length}}集</view>
			</view>
		</footer>
		<view class="lingqu" @click="golingqu" v-if="!isHasCardList">领取名片</view>
	</view>
</template>

<script>
	import Introduce from './page/introduce/introduce.vue'
	import Catalogue from './page/catalogue/catalogue.vue'
	import Evaluate from './page/evaluate/evaluate.vue'
	import Recommend from './page/recommend/recommend.vue'
	import {
		InformationCourseSelection,
		wxPay,
		InformationCourseCollect,Informationplaycount,
		InformationCourseUserVideo
	} from '@/common/http/api.js'
	import {LoginHandle, isHasCardList} from '@/common/login.js'
	export default {
		components: {
			Introduce,
			Catalogue,
			Evaluate,
			Recommend
		},
		data() {
			return {
				id: '',
				userId: '',
				info: '',
				current: 0,
				videoCurrent: 0,
				type: '',
				video_id: '',interval:null,
				videoContext: '',
				isHasCardList:false
			};
		},
		onLoad(e) {
			this.id = e.id

			if (e.userId) {
				this.userId = e.userId
			}
			if (e.type) {
				this.type = e.type
			}
			if (e.video_id) {
				this.video_id = e.video_id
			}
			
			if(e.courseId) {
				this.id = e.courseId
			}
			
			isHasCardList({}).then(res=>{
				this.isHasCardList=res
				// console.log('isHasCardList', res)
				
			}).finally(err=>{
				this.init()
			})
			
			
			//获取分享的图片
			let token = uni.getStorageSync('token')
			if (token) {
				this.$store.dispatch('getShare')
			}


			//禁止录屏
			// 设置视觉效果为模糊
			wx.setVisualEffectOnCapture({
				visualEffect: 'hidden',
				complete: (e) => {
					console.log('录屏', e)
				}
			});
			wx.onUserCaptureScreen(function(res) {
				console.log('用户截屏了')

			})
			// 监听用户录屏事件
			const handler = function(res) {
				console.log('用户录屏了')
			}
			wx.onScreenRecordingStateChanged(handler)

			// 取消监听用户录屏事件
			wx.offScreenRecordingStateChanged(handler)
		},
		onHide() {
			clearInterval(this.interval)
		},
		onUnload() {
			clearInterval(this.interval)
			wx.offUserCaptureScreen(function() {
				console.log('取消offUserCaptureScreen')
			})
			wx.offScreenRecordingStateChanged(function() {
				console.log('取消offScreenRecordingStateChanged')
			})
		},
		computed: {
			getVideo() {
				let video = ''
				try {
					if (Array.isArray(this.info.ml) && this.info.ml) {
						video = this.info.ml[this.videoCurrent]
					}
				} catch (e) {
					//TODO handle the exception
				}
				return video
			}
		},
		onReachBottom() {
			if (this.current === 0) {
				this.$refs.IntroduceRef.onReachBottomHttp()
			} else if (this.current === 2) {
				this.$refs.EvaluateRef.onReachBottomHttp()
			} else if (this.current === 3) {
				this.$refs.RecommendRef.onReachBottomHttp()
			}
		},
		onShareAppMessage() {
			let img = ''
			let title = ''
			let path = '/pages/loading/loading?'
			if (this.isValid(this.$store.state.share.share_title)) {
				title = this.info.js.title
				//img = this.$store.state.share.share_img
				img = this.info.js.img
				path += 'shareId=' + this.$store.state.share.business_card_id + '&'
			}
			path += 'userId=' + this.info.user_id + '&type=1' + '&courseId=' + this.id + '&video_id=' + this.getVideo
				.id
			return {
				title,
				path,
				imageUrl: img
			};
		},
		onShareTimeline() {
			console.log('分享', this.$store.state)
			let img = ''
			let title = ''
			let path = 'is_mixin_collect=6&'
			if (this.isValid(this.$store.state.share.share_title)) {
				title = this.info.js.title
				//img = this.$store.state.share.share_img
				img = this.info.js.img
				path += 'shareId=' + this.$store.state.share.business_card_id + '&'
			}
			if (Array.isArray(this.info.ml) && this.info.ml.length > 0) {
				path += 'userId=' + this.info.user_id + '&type=1' + '&courseId=' + this.id + '&video_id=' + this.getVideo
					.id
			}
			return {
				title,
				query: path,
				imageUrl: img
			};
		},
		onAddToFavorites() {
			console.log('分享', this.$store.state)
			let img = ''
			let title = ''
			let path = 'is_mixin_collect=6&'
			if (this.isValid(this.$store.state.share.share_title)) {
				title = this.info.js.title
				//img = this.$store.state.share.share_img
				img = this.info.js.img
				path += 'shareId=' + this.$store.state.share.business_card_id + '&'
			}
			if (Array.isArray(this.info.ml) && this.info.ml.length > 0) {
				path += 'userId=' + this.info.user_id + '&type=1' + '&courseId=' + this.id + '&video_id=' + this.getVideo
					.id
			}

			return {
				title,
				query: path,
				imageUrl: img
			};
		},
		methods: {
			handlePlay(){
				Informationplaycount({id:this.id})
			},
			golingqu(){
				uni.navigateTo({
					url:"/pagesA/findInterest/findInterest"
				})	
			},
			toLogin() {
				let url = '/pages/login/login?isApi=2'
				if (this.shareId) {
					url += '&shareId=' + this.shareId
				}
				uni.navigateTo({
					url
				})
			},
			onTimeUpdate(event) {
				//console.log('播放时间',event)
				if (event.detail.currentTime === event.detail.duration) {
					console.log('播放完毕', event)
					InformationCourseUserVideo({
						video_id: this.getVideo.id,
						status: 1,
						watch_progress: event.detail.currentTime
					}).then(res => {
						this.init()
					})
				}
			},
			collection(e) {
				let token = uni.getStorageSync('token')
				if (!token) {
					this.toLogin()
					return
				}
				uni.showLoading()
				InformationCourseCollect({
					course_id: this.id
				}).then(res => {
					uni.hideLoading()
					this.init()
				})
			},
			setCurrent(e) {
				this.current = e
			},
			init() {
				let data = {
					id: this.id,
				}
				if (this.type == 1) {
					data.data = {}
					data.data['user_id'] = this.userId
					data.data['video_id'] = this.video_id
					data.data = JSON.stringify(data.data)
					data['type'] = 1
				}
				uni.showLoading()
				InformationCourseSelection(data).then(res => {
					uni.hideLoading()
					this.info = res.data
					if(this.info.qx==1){
						clearInterval(this.interval)
					}
				})
			},
			playVideo() {
				// 获取视频组件实例
				const videoContext = uni.createVideoContext('myVideo', this);
				console.log('videoContext', videoContext)
				videoContext.currentTime((res) => {
					//this.currentTime = res.currentTime;
					console.log('当前时间', res.currentTime)
				});
				// 调用播放方法
				//videoContext.play();
			},
			pay() {
				let token = uni.getStorageSync('token')
				if (!token) {
					this.toLogin()
					return
				}
				uni.showLoading()
				wxPay({
					id: this.id
				}).then(res => {
					uni.hideLoading()
					//调用微信官方支付接口弹出付款界面,输入密码扣款
					wx.requestPayment({
						timeStamp: String(res.data.timeStamp),
						nonceStr: res.data.nonceStr,
						package: res.data.package,
						signType: res.data.signType,
						paySign: res.data.paySign,
						success: res => {
							
							uni.showToast({duration:3000,
								title: '支付成功',
								icon: 'none'
							})
							clearInterval(this.interval);
							this.interval = setInterval(() => {
								this.init()
							}, 1000);
							
						},
						fail: function(err) {
							console.log('支付失败', err);
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: white;
	}

	.video {
		width: 100%;
		height: 429rpx;

		#myVideo {
			width: 100%;
			height: 100%;
		}

		.zt {
			width: 100%;
			height: 100%;
			position: relative;

			video {
				width: 100%;
				height: 100%;
			}

			.zt-img {
				width: 100%;
				height: 100%;
			}

			.zt-start {
				width: 98.4rpx;
				height: 98.4rpx;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				z-index: 8;
			}
		}

		.noPermission {
			width: 100%;
			height: 100%;
			position: relative;

			.zt-img {
				width: 100%;
				height: 100%;
			}

			&>view {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 9;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				background: rgba(0, 0, 0, 0.5);

				.noPermission-tx {
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #CCCCCC;
					margin-bottom: 13rpx;
				}

				.noPermission-btn {
					width: 200rpx;
					height: 59rpx;
					background: #FF8400;
					border-radius: 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}
	}

	.tab {

		margin-top: 14rpx;
		padding: 26rpx 0 13rpx;
		width: 688rpx;
		margin: 0 auto;
		display: flex;
		border-bottom: 1rpx solid #BCBCBC;

		.tab-item {
			flex: 1;
			min-width: 0;
			display: flex;
			justify-content: center;
			align-items: center;

			text {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #666666;
				height: 100%;
			}
		}

		.ac {
			text {
				font-family: Adobe Heiti Std;
				font-weight: normal;
				font-size: 30rpx;
				color: #12B475;
				position: relative;
			}

			text::after {
				content: "";
				width: 100%;
				height: 6rpx;
				background: #12B475;
				border-radius: 3rpx;
				position: absolute;
				bottom: -13rpx;
				left: 0;
				z-index: 8;
			}
		}

	}

	footer {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		height: 122rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -3rpx 5rpx 0rpx rgba(144, 144, 144, 0.2);
		display: flex;
		align-items: center;
		z-index: 99;

		.footer-r {
			width: 390rpx;
			height: 88rpx;
			background: #FF8400;
			border-radius: 44rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-right: 20rpx;

			.footer-r-title {
				font-family: Adobe Heiti Std;
				font-weight: normal;
				font-size: 30rpx;
				color: #FFFFFF;
				text-align: center;
			}

			.footer-r-price {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: center;
			}
		}

		.footer-r-cancle {
			background: #B8B8B8;
		}

		.footer-l {
			flex: 1;
			min-width: 0;
			display: flex;
			align-items: center;
			justify-content: center;

			.footer-l-item {
				position: relative;

				image {
					width: 35rpx;
					height: 35rpx;
					margin-bottom: 17rpx;
				}

				font-family: PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #131313;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				button {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;
					opacity: 0;
				}
			}

			.footer-l-item:first-child {
				margin-right: 82rpx;
			}
		}
	}

	.list-item-activity-btn-cancle {
		width: 170rpx;
		height: 66rpx;
		background: #fff;
		border: 1px solid #12B475;
		border-radius: 33rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #12B475;
		margin-bottom: 22rpx;
	}
	.lingqu{
		position: fixed;
		width: 670rpx;
		left: 40rpx;
		bottom: 130rpx;
		border-radius: 30rpx;
		height: 80rpx;
		background: rgba(0, 0, 0, 0.6);
		color: #fff;
		font-size: 28rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9999;
	}
</style>